<template>
	<view class="entirety">
		<view class="picture">
			<image class="EquipmentDrawing" src="../../../static/EquipmentDrawing.jpg"></image>
		</view>
		<view class="item">
			<ul>
				<li>
					<view class="title"><image class="icon" src="../../../static/helmet.png">头盔</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
				<li>
					<view class="title"><image class="icon" src="../../../static/headset.png">耳机</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
				<li>
					<view class="title"><image class="icon" src="../../../static/Flashcontrol.png">闪控</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
				<li>
					<view class="title"><image class="icon" src="../../../static/TreadFrequency.png">踏频</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
				<li>
					<view class="title"><image class="icon" src="../../../static/heartRate.png">心率</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
				<li>
					<view class="title"><image class="icon" src="../../../static/cycling.png">e出行</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png">
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.entirety {
		width: 100vw;
		height: 100vh;
		background-color: #000000;
	}

	.picture {
		width: 100%;
		height: 250px;
	}

	.EquipmentDrawing {
		width: 100%;
	}

	.item li {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: #232323;
		padding-left: 2%;
		margin-bottom: 10px;
		color: #ffffff;
	}

	.title {
		float: left;
		padding-left: 2%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon {
		width: 25px;
		height: 25px;
		padding-right: 10px;
	}

	.value {
		padding-right: 4%;
		float: right;
		height: 100%;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jiantou {
		width: 15px;
		height: 15px;
		float: right;
	}
</style>